// components/progress-bar/progress-bar.js
let movableAreaWidth = 0
let movableViewWidth = 0
const backgroundAudioManager = wx.getBackgroundAudioManager()
//当前秒数
let currentSec = -1
//当前音乐总时长
let duration = 0
let isMoving = false
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isSame:Boolean
  },
  //组件生命周期函数
  lifetimes: {
    ready () {
      if(this.properties.isSame && this.data.showTime.totalTime=== '00:00'){
        this.setTime()
      
      }
      this.getMoveAbleDis()
      this.bindBGMEvent()
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    showTime: {
      currentTime: '00:00',
      totalTime: '00:00'
    },
    movableDis: 0,
    progress: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange (event) {
      //拖动状态时
      if (event.detail.source === 'touch') {
        //存值
        this.data.progress = event.detail.x / (movableAreaWidth - movableViewWidth) * 100

        this.data.movableDis = event.detail.x

        const currentTimeFormat = this.dateFormat(Math.floor(backgroundAudioManager.currentTime))
        isMoving = true
        this.setData({
          progress: this.data.progress,
          movableDis: this.data.movableDis,
          ['showTime.currentTime']: `${currentTimeFormat.min}:${currentTimeFormat.sec}`
        })

        backgroundAudioManager.seek(duration * this.data.progress / 100)
      }
      isMoving = false
    },
    getMoveAbleDis () {
      const query = this.createSelectorQuery()
      query.select('.movable-area').boundingClientRect()
      query.select('.movable-view').boundingClientRect()
      query.exec((rect) => {
        movableAreaWidth = rect[0].width
        movableViewWidth = rect[1].width
      })
    },
    bindBGMEvent () {
      backgroundAudioManager.onCanplay(() => {
        if(typeof backgroundAudioManager.duration != 'undefined'){
           this.setTime()
        } else {
          setTimeout(() => {
            this.setTime()
          }, 1000);
        }
      })
      //实时更新
      backgroundAudioManager.onTimeUpdate(() => {
        const currentTime = backgroundAudioManager.currentTime
        const currentTimeFormat = this.dateFormat(currentTime)
        const duration = backgroundAudioManager.duration
        //实时更新的秒数
        if(!isMoving) {
          const sec = currentTime.toString().split('.')[0]
        if( sec !== currentSec){
          this.setData({
            movableDis: (movableAreaWidth - movableViewWidth) * currentTime / duration,
            progress: currentTime / duration * 100,
            ['showTime.currentTime'] :`${currentTimeFormat.min}:${currentTimeFormat.sec}`
          })
          currentSec = sec
          //联动歌词
          this.triggerEvent('timeUpdate',{
            currentTime
          })
          }
        } 
      })
      backgroundAudioManager.onEnded(() => {
        this.triggerEvent('musicEnd')
      })
      backgroundAudioManager.onPlay(() => {
        isMoving = false
        this.triggerEvent('musicPlay')
      })
      backgroundAudioManager.onPause(() => {
        this.triggerEvent('musicPause')
      })
      backgroundAudioManager.onError((err) => {
        wx.showToast({
            title: '错误'+ err.errCode
        })
      })
      backgroundAudioManager.onPrev((res) => {
        this.triggerEvent('onPrev')
      })
      backgroundAudioManager.onNext(() => {
        this.triggerEvent('onNext')
      })
    },
    //设置时间
    setTime () {
      duration = backgroundAudioManager.duration
      const durationFormat = this.dateFormat(duration)
      this.setData({
        ['showTime.totalTime'] : `${durationFormat.min}:${durationFormat.sec}`
      })    
    },
    //格式化时间
    dateFormat(sec){
      const min = Math.floor(sec / 60)
      sec = Math.floor(sec % 60)
      return {
        'min': this.parse0(min),
        'sec': this.parse0(sec)
      }
    },
    //补0
    parse0(sec){
      return sec < 10 ? '0' + sec : sec
    }
  }
})
